import React from 'react';
import { Card, Table, Button, Space, Tag } from 'antd';
import { EditOutlined, DeleteOutlined, ApartmentOutlined } from '@ant-design/icons';

/**
 * 部门列表页面
 * 展示所有部门信息和管理功能
 */
const DepartmentList: React.FC<React.PropsWithChildren<unknown>> = () => {
  // 模拟部门数据
  const departmentData = [
    {
      key: '1',
      name: '技术部',
      manager: '张三',
      employeeCount: 25,
      status: 'active',
    },
    {
      key: '2',
      name: '市场部',
      manager: '李四',
      employeeCount: 18,
      status: 'active',
    },
    {
      key: '3',
      name: '财务部',
      manager: '王五',
      employeeCount: 12,
      status: 'active',
    },
  ];

  const columns = [
    {
      title: '部门名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '部门经理',
      dataIndex: 'manager',
      key: 'manager',
    },
    {
      title: '员工数量',
      dataIndex: 'employeeCount',
      key: 'employeeCount',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (
        <Tag color={status === 'active' ? 'green' : 'red'}>
          {status === 'active' ? '正常' : '停用'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Space size="middle">
          <Button type="link" icon={<EditOutlined />} size="small">
            编辑
          </Button>
          <Button type="link" danger icon={<DeleteOutlined />} size="small">
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <h2><ApartmentOutlined /> 部门列表</h2>
      <Card>
        <Table columns={columns} dataSource={departmentData} pagination={false} />
      </Card>
    </div>
  );
};

export default DepartmentList;